<template>
	<div class="releaseTask">
		<div class="classIndex_h">
			<a @click="getback">班级作业</a>
			<strong><i>></i>编辑作业</strong>
		</div>
		<div class="releaseTask_form">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="发送范围" class="rangeIt" prop="class_id" v-if="0">
					<el-button type="primary" @click="getRange()">选择</el-button>
					<span class="tag_x box" v-for="item in rangeList" v-if="nameList.indexOf(item.id) > -1">
						{{item.rename}}
					</span>
				</el-form-item>
				<el-form-item label="通知家长" prop="resource" v-if="0">
					<el-radio-group v-model="ruleForm.resource">
						<el-radio label="1">是</el-radio>
						<el-radio label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="作业标题" prop="name">
					<el-input v-model.trim="ruleForm.name" placeholder="请输入作业标题" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="作业类型" prop="type">
					<el-select filterable v-model="ruleForm.type" @change="changeType()" placeholder="请选择作业类型">
						<el-option label="考试" :value="3"></el-option>
						<el-option label="视频" :value="4"></el-option>
						<el-option label="课件" :value="5"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="截止时间" required>
					<el-form-item prop="end_time">
						<el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options='pickerOptions' v-model="ruleForm.end_time"></el-date-picker>
					</el-form-item>
				</el-form-item>
				<el-form-item label="作业时长" required>
					<el-form-item prop="length">
						<el-input-number v-model="ruleForm.length" :min="1" :max="500" label="描述文字" style="width: 220px"></el-input-number>
					</el-form-item>
				</el-form-item>
				<el-form-item label="作业描述" prop="profile">
					<el-input type="textarea" :rows="5" resize="none" v-model.tirm="ruleForm.profile" placeholder="请输入作业内容描述" maxlength="140"></el-input>
					<span class="sumTXT"><i>{{ ruleForm.profile.length }}</i>/140</span>
				</el-form-item>
				<el-form-item label="关联资源" prop="resource_id" class="correlationTk">
					<el-button type="primary" plain v-show="ruleForm.type === 4" @click="associatedVideo()">视频</el-button>
					<el-button type="primary" plain v-show="ruleForm.type === 3" @click="associatedTest()">试卷</el-button>
					<el-button type="primary" plain v-show="ruleForm.type === 5" @click="associatedResource()">资源</el-button>
					<template>
						<uploader v-show="ruleForm.type === 5" :options="uploadOptions" :autoStart="false" ref="uploader" :file-status-text="statusText" @files-submitted="fileSubmit" @file-removed="fileRemoved" @file-success="fileSuccess" @file-error="fileFail" class="uploader-example">
							<uploader-unsupport></uploader-unsupport>
							<uploader-btn :directory="false" :attrs="attrs" :single="true">
								选择文件
							</uploader-btn>
							<uploader-list v-if="true"></uploader-list>
						</uploader>
						<input type="text" v-model="resourceUP" v-show="0">
					</template>
					</span>
					<div class="list-msgs">
						<ul>
							<li class="clear" v-if="ruleForm.resource_name">
								<span>{{ruleForm.resource_name}}</span>
								<i class="el-icon-close fr" @click="changeType()"></i>
							</li>
						</ul>
					</div>
				</el-form-item>
				<el-form-item class="submitFormTk">
					<el-button @click="resetForm('ruleForm')">取消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')" v-preventReClick>确认</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 接收范围 -->
		<el-dialog title="接收范围" :visible.sync="receivingRange" width="680px" custom-class="alBox" :close-on-click-modal="false">
			<div class="releaseTK">
				<div class="releaseTK_h">
					<span>选择</span>
					<span>接收名单</span>
				</div>
				<template>
					<el-transfer v-model="nameList" :props="{
							label: 'rename',
							key: 'id',
						}" :data="rangeList">
					</el-transfer>
				</template>
			</div>
			<div slot="footer" class="dialog-footer releaseTK_btn buttonCSS">
				<el-button type="primary" @click="receivingRange = false" plain>取 消</el-button>
				<el-button type="primary" @click="getChoice()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 选择视频 -->
		<el-dialog title="选择视频" :visible.sync="selectVideoView" width="800px" custom-class="alBox" :close-on-click-modal="false">
			<div class="releaseTK">
				<div class="releaseTK_h clear">
					<div class="resourceType fl">
						<template>
							<el-select filterable v-model="resourceType" @chang="changeSelected" placeholder="请选择">
								<el-option label="全部" :value="-1"></el-option>
								<el-option label="公开课" :value="0"></el-option>
								<!-- <el-option label="微课" :value="-1"></el-option> -->
							</el-select>
						</template>
					</div>
					<!--  -->
					<div class="resourceSearch fl">
						<el-input placeholder="视频名，教师名" @change="changeSearch" v-model="keyword" class="input-with-select">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</div>
				</div>
				<!--  -->
				<div class="resourceData">
					<template>
						<el-table border ref="videoChecked" :data="videoList" style="width: 100%" highlight-current-row @row-click="showVideoradio" @current-change="changeVideoChecked">
							<el-table-column type="index" label="序号" width="50">
								<template slot-scope="scope">
									<el-radio class="radio" v-model="videoradio" :label="scope.$index">&nbsp;</el-radio>
								</template>
							</el-table-column>
							<el-table-column prop="video_name" label="视频名称" width="248" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="category" label="视频分类" width="160" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="type_name" label="视频信息" width="80" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="create_time" label="上传时间" width="180" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</template>
					<div class="pageTable" v-if="total_number > page_size">
						<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
						</el-pagination>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer releaseTK_btn buttonCSS">
				<el-button type="primary" @click="selectVideoView = false" plain>取 消</el-button>
				<el-button type="primary" @click="addVideo()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 选择试卷 -->
		<el-dialog title="选择试卷" :visible.sync="selectTestView" width="800px" custom-class="alBox" :close-on-click-modal="false">
			<div class="releaseTK">
				<div class="releaseTK_h clear">
					<!--  -->
					<div class="resourceSearch fl">
						<el-input placeholder="试卷名称" v-model="keyword2" @change="changeSearch2" class="input-with-select">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</div>
				</div>
				<!--  -->
				<div class="resourceData">
					<template>
						<el-table border ref="testChecked" :data="testList" style="width: 100%" highlight-current-row @row-click="showTestradio" @current-change="changeTestChecked">
							<el-table-column type="index" label="序号" width="50">
								<template slot-scope="scope">
									<el-radio class="radio" v-model="testradio" :label="scope.$index">&nbsp;</el-radio>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="试卷名称" width="300" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="subject" label="试卷分类" width="150" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="create_time" label="组卷时间" width="218" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</template>
					<div class="pageTable" v-if="total_number2 > page_size2">
						<el-pagination @current-change="change_page2" :page-size="page_size2" :current-page="page_index2" layout="prev, pager, next" :total="total_number2">
						</el-pagination>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer releaseTK_btn buttonCSS">
				<el-button type="primary" @click="selectTestView = false" plain>取 消</el-button>
				<el-button type="primary" @click="addTest()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 选择资源 -->
		<el-dialog title="选择资源" :visible.sync="selectResourceView" width="800px" custom-class="alBox" :close-on-click-modal="false">
			<div class="releaseTK">
				<div class="releaseTK_h clear">
					<div class="resourceType fl">
						<template>
							<el-select filterable v-model="resourceType3" @change="changeSelected3" placeholder="请选择">
								<el-option label="全部" :value="0"></el-option>
								<el-option label="文档" :value="1"></el-option>
								<el-option label="图片" :value="3"></el-option>
								<el-option label="压缩文件" :value="4"></el-option>
								<el-option label="音频文件" :value="5"></el-option>
								<el-option label="视频" :value="6"></el-option>
								<el-option label="应用程序" :value="7"></el-option>
								<el-option label="其他" :value="8"></el-option>
							</el-select>
						</template>
					</div>
					<!--  -->
					<div class="resourceSearch fl">
						<el-input placeholder="视频名，教师名" v-model="keyword3" @change="changeSearch3" class="input-with-select">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</div>
				</div>
				<!--  -->
				<div class="resourceData">
					<template>
						<el-table border ref="resourceChecked" :data="resourceList" style="width: 100%" highlight-current-row @row-click="showResourceradio" @current-change="changeResourceChecked">
							<el-table-column type="index" label="序号" width="50">
								<template slot-scope="scope">
									<el-radio class="radio" v-model="resourceradio" :label="scope.$index">&nbsp;</el-radio>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="资源名称" width="250" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="category" label="资源分类" width="158" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="file_type" label="资源类型" width="80" show-overflow-tooltip>
								<template slot-scope="scope">
									<span v-if="scope.row.file_type == 1">文档</span>
									<span v-if="scope.row.file_type == 2">日志</span>
									<span v-if="scope.row.file_type == 3">图片</span>
									<span v-if="scope.row.file_type == 4">压缩文件</span>
									<span v-if="scope.row.file_type == 5">音频文件</span>
									<span v-if="scope.row.file_type == 6">视频</span>
									<span v-if="scope.row.file_type == 7">应用程序</span>
									<span v-if="scope.row.file_type == 8">其他</span>
								</template>
							</el-table-column>
							<el-table-column prop="create_time" label="上传时间" width="180" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</template>
					<div class="pageTable" v-if="total_number3 > page_size3">
						<el-pagination @current-change="change_page3" :page-size="page_size3" :current-page="page_index3" layout="prev, pager, next" :total="total_number3">
						</el-pagination>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer releaseTK_btn buttonCSS">
				<el-button type="primary" @click="selectResourceView = false" plain>取 消</el-button>
				<el-button type="primary" @click="addResource()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {

	data() {

		return {
			pickerOptions: {
				disabledDate: (time) => {
					return time.getTime() < Date.now() - 8.64e7;
				}
			},
			resourceUP: '',
			path: this.$route.query.id,
			ruleForm: {
				id: '',
				list: [],
				class_id: [],
				type: '',
				end_time: '',
				profile: '',
				name: '',
				length: 100,
				resource_path: '',
				resource_id: '',
				resource_name: '',
				resource_postfix: '',
				resource_filesize: 0,
			},
			selectObj: {
				id: null,
				name: '',
			},
			rules: {
				class_id: [
					{ required: true, message: '请选择发送范围' }
				],
				length: [
					{ required: true, message: '请输入作业时长', trigger: 'blur' }
				],
				name: [
					{ required: true, message: '请输入作业标题', trigger: 'blur' },
					{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
				],
				type: [
					{ required: true, message: '请选作业类型', trigger: 'change' }
				],
				end_time: [
					{ required: true, message: '请选择日期', trigger: 'change' }
				],

				resource_id: [
					{ required: true, message: '请选择资源' }
				],
				profile: [
					{ required: true, message: '请输入作业内容描述' },
					// { min: 3, max: 140, message: '长度在 3 到 140 个字符', trigger: 'blur' }
				],
			},



			rangeList: [], //接收范围 -1
			nameList: [], //接收范围 -2
			receivingRange: false, //接收范围
			selectVideoView: false, //选择视频
			videoList: [], //列表
			resourceType: '', // 选择类型
			keyword: '', //关键字搜索
			page_index: 1,
			page_size: this.$g.page_size,
			total_number: [],
			videoradio: '',
			videoradioID: '',

			selectTestView: false, //选择试卷
			testList: [], //试卷列表
			keyword2: '', //关键字搜索
			page_index2: 1,
			page_size2: this.$g.page_size,
			total_number2: [],
			testradio: '',
			testradioID: '',

			selectResourceView: false, //选择资源
			resourceList: [], //列表
			resourceType3: '', // 选择类型
			keyword3: '', //关键字搜索
			page_index3: 1,
			page_size3: this.$g.page_size,
			total_number3: [],
			resourceradio: '',
			resourceradioID: '',

			statusText: {
				success: '上传成功',
				error: '上传出错',
				uploading: '正在上传...',
				paused: '暂停',
				waiting: '等待上传'
			},
			selectFileOrNot: false, //是否选中文件
			uploadInfo: {
				file_name: '',
				file_path: '',
				file_size: 0
			},
			attrs: {
				accept: []
			},

			uploadOptions: {
				target: this.BASE_URL + '/api/resource/res_upload',
				testChunks: false,
				headers: { Authorization: `Bearer ` + this.$g.access_token },
			},
			selectFileShow: true, //是否显示选择文件按钮
			uploadRetryTimes: 100, //文件最大重传次数
		}
	},
	watch: {
		'changData'(val, newval) {
			this.path = sessionStorage.getItem('classId')
		},
		'page_index': {
			handler(newVal) {
				this.videoList = this.videoList.slice((newVal - 1) * 5, (newVal - 1) * 5 + 5);
				this.testradio = '';
			}
		},
		'page_index2': {
			handler(newVal) {
				this.testList = this.testList.slice((newVal - 1) * 5, (newVal - 1) * 5 + 5);
				this.resourceradio = '';
			}
		},
		'page_index3': {
			handler(newVal) {
				this.resourceList = this.resourceList.slice((newVal - 1) * 5, (newVal - 1) * 5 + 5);
				this.resourceradio = '';
			}
		},
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	created() {
		this.getTaskList()
	},
	methods: {
		getback() {
			this.$router.back(-1)
		},
		getTaskList() {
			let success = (res => {

				let data = res.data;

				this.ruleForm.id = data.id
				this.ruleForm.name = data.name
				this.ruleForm.type = data.type;
				this.ruleForm.end_time = data.end_time;
				this.ruleForm.length = data.length;
				this.ruleForm.profile = data.profile

				this.ruleForm.resource_id = data.resource_id;
				this.ruleForm.resource_name = data.resourcename;
				// this.ruleForm.resource_path =  data.resourceurl;
			})
			let params = { task_id: this.$route.query.uid }
			this.$ajax.get('api/task/task', { params, func: { success: success } })
		},
		// 单选框，选择点击的数据
		showVideoradio(row) {
			this.videoradio = this.videoList.indexOf(row);
			this.videoradioID = row.id;
		},
		// 单选框，选择点击的数据
		showTestradio(row) {
			this.testradio = this.testList.indexOf(row);
			this.testradioID = row.id;
		},
		// 单选框，选择点击的数据
		showResourceradio(row) {
			this.resourceradio = this.resourceList.indexOf(row);
			this.resourceradioID = row.id;
		},
		saveTask() {

			let success = (res => {
				this.$message.success(res.msg);
				if (this.checked_name === null) {
					this.$message.error('请选择关联资源');
					return
				}
				/*		if (this.nameList.length === 0) {
							this.$message.error('请选择发送范围');
							return
						}*/

				setTimeout(() => {
					this.$router.back(-1)
					// this.$router.push({path: '/classIndex/classTask',query: {id: this.$route.query.id}})
				}, 1000);
			})
			this.ruleForm.class_id = this.path
			this.$ajax.put('api/task/add_issue_task', this.ruleForm, { func: { success: success } })
		},
		changeType() {

			this.ruleForm.resource_id = '';
			this.ruleForm.resource_name = '';
		},
		//接受范围
		getRange() {

			let success = (res => {
				let data = res.data;


				this.rangeList = data;
				for (var i = 0; i < this.rangeList.length; i++) {
					this.rangeList[i].org_tre_name = this.rangeList[i].org_tre_name.substring(4, 15)
				}
				this.receivingRange = true

			});
			this.$ajax({
				url: 'api/org/class_userid',
				method: 'get',
				params: {
					user_id: this.$g.user_id,
					style: 1,
					data_type: 0
				},
				func: {
					success: success
				}
			})
		},
		//接受范围---选择
		getChoice() {
			// console.info(this.nameList,10)
			this.ruleForm.class_id = this.nameList
			this.receivingRange = false
		},
		//关联视频
		associatedVideo() {
			this.selectObj = { id: null, name: '' }
			let success = (res => {

				let data = res.data;
				this.videoList = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index);
				this.videoradio = ''
				this.videoradioID = ''
				this.selectVideoView = true


			});
			this.$ajax({
				url: 'api/video/video_list',
				method: 'get',
				params: {
					creare_id: this.path,
					keyword: this.keyword,
					type: this.resourceType,
					page_index: this.page_index,
					page_size: this.page_size,
					status: 1,
				},
				func: {
					success: success
				}
			})
		},
		//选中的视频--列表
		changeVideoChecked(obj) {
			if (is_empty(obj)) {
				return false;
			}
			this.selectObj = {
				id: obj.id,
				name: obj.video_name,
			}
		},
		//添加视频
		addVideo() {
			if (is_empty(this.selectObj.id)) {
				this.$message.error('还没勾选哦~~');
				return
			}
			this.ruleForm.resource_id = this.selectObj.id;
			this.ruleForm.resource_name = this.selectObj.name;
			this.selectVideoView = false
		},

		//分页
		change_page(val) {
			this.page_index = val;
			this.associatedVideo()
		},
		//视频类型
		changeSelected() {
			this.page_index = 1
			this.associatedVideo()
		},
		//搜索
		changeSearch() {
			this.page_index = 1;
			this.associatedVideo()
		},
		//
		//关联试卷
		associatedTest() {
			this.selectObj = { id: null, name: '' }
			let success = (res => {
				let data = res.data;
				this.testList = data.data;
				this.total_number2 = data.data_sum;
				this.page_index2 = parseInt(data.page_index);
				this.testradio = ''
				this.testradioID = ''
				this.selectTestView = true
			});
			this.$ajax({
				url: 'api/test/test',
				method: 'get',
				params: {
					user_id: this.$g.user_id,
					keyword: this.keyword2,
					page_index: this.page_index2,
					page_size: this.page_size2,
					other_authority: 1,
					status: 1,
				},
				func: {
					success: success
				}
			})
		},
		//选中的试卷--列表
		changeTestChecked(obj) {
			if (is_empty(obj)) {
				return false;
			}
			this.selectObj = {
				id: obj.id,
				name: obj.name
			}
		},
		//添加试卷
		addTest() {
			if (is_empty(this.selectObj.id)) {
				this.$message.error('还没勾选哦~~');
				return
			}
			this.ruleForm.resource_id = this.selectObj.id;
			this.ruleForm.resource_name = this.selectObj.name;
			this.selectTestView = false
		},
		//分页
		change_page2(val) {
			this.page_index2 = val;
			this.associatedTest()
		},
		//搜索
		changeSearch2() {
			this.page_index = 1;
			this.associatedTest()
		},
		//
		//关联资源
		associatedResource() {
			this.selectObj = { id: null, name: '' }
			let success = (res => {

				let data = res.data;
				this.resourceList = data.data;
				this.total_number3 = data.data_sum;
				this.page_index3 = parseInt(data.page_index)
				this.resourceradio = ''
				this.resourceradioID = ''
				this.selectResourceView = true
			});
			this.$ajax({
				url: 'api/resource/resource',
				method: 'get',
				params: {
					creare_id: this.$g.user_id,
					name: this.keyword3,
					page: this.page_index3,
					size: this.page_size3,
					file_type: this.resourceType3,
					data_type: 2,
					not_in_file_type: 2,
				},
				func: { success: success }
			})
		},
		//选中的资源--列表
		changeResourceChecked(obj) {
			if (is_empty(obj)) {
				return false;
			}
			this.selectObj = {
				id: obj.id,
				name: obj.name
			}
		},
		//添加资源
		addResource() {
			if (is_empty(this.selectObj.id)) {
				return this.$message.error('还没勾选哦~~');
			}
			this.$refs.uploader.uploader.cancel();
			this.ruleForm.resource_id = this.selectObj.id;
			this.ruleForm.resource_name = this.selectObj.name;
			this.selectResourceView = false
		},
		//分页
		change_page3(val) {
			this.page_index3 = val;
			this.associatedResource()
		},
		//视频类型
		changeSelected3() {
			this.page_index = 1
			this.associatedResource()
		},
		//搜索
		changeSearch3() {
			this.page_index = 1;
			this.associatedResource()
		},

		//
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {


				let endTime = (new Date(this.ruleForm.end_time)).getTime();
				let timestamp = (new Date()).getTime();

				if (endTime < timestamp) {
					return this.$message.error('截止时间时间不能小于当前时间');
				}

				if (valid) {

					if (this.$refs.uploader.uploader.fileList.length > 0) {
						this.fileUpload(this.$refs.uploader.uploader.fileList.length, 10);
					} else {

						this.saveTask();
					}
				} else {
					return false;
				}
			});
		},

		resetForm(formName) {
			this.$router.back(-1)
		},

		//上传成功的事件  
		fileSuccess(rootFile, file, message, chunk) {
			var mess = JSON.parse(message);
			mess = handleResponseData(mess)
			if (parseInt(mess.data.status) === 1) {
				this.ruleForm.resource_path = mess.data.file_path;
				this.ruleForm.resource_postfix = mess.data.post_fix;
				this.saveTask();
			} else if (mess.status === 'fail') {
				this.$message.error(mess.msg + ' ' + file.name)
				this.$refs.uploader.uploader.cancel()
			}
		},
		fileFail(rootFile, file, message, chunk) {
			var mess = eval('(' + message + ')');
			if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
				let callbcak = (data => {
					this.uploadRetryTimes--;
					this.$refs.uploader.uploader.retry(file);
				})
				this.get_access_token(callbcak);
			} else {
				this.$message.error(mess.msg);
			}
		},
		fileSubmit(files, fileList, event) {

			if (files[0].size === 0) {
				this.$refs.uploader.uploader.cancel();
				this.$message.error('上传文件大小不能小于0')
			} else {

				if (this.$refs.uploader.uploader.fileList.length >= 2) {
					this.$refs.uploader.uploader.fileList.splice(0, 1)
					this.$refs.uploader.uploader.files.splice(0, 1)
				}
				// console.info(fileList)
				this.ruleForm.resource_filesize = files[0].size;
				this.ruleForm.resource_id = 0;
				this.ruleForm.resource_name = files[0].name
				this.selectFileOrNot = true;
				this.selectFileShow = false;
				this.resourceUP = files[0].name
			}


		},
		fileRemoved(file) {
			this.ruleForm.resource_id = '';
			this.ruleForm.resource_name = ''
			this.selectFileOrNot = false;
			this.selectFileShow = true;
			this.resourceUP = ''
		},
		fileUpload() {
			this.$refs.uploader.uploader.upload();
		},
	}
}
</script>